<template>
  <h2>Reactive定义数据</h2>
  <div>直接赋值：{{ model.name }} - {{ model.num }}</div>
  <div>解构赋值：{{ name }} - {{ num }}</div>
  <button @click="changeKey">change</button>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
// Vue 的响应式系统是通过属性访问进行追踪的
// reactive() API 有两条限制：
// 1 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 基础类型 无效。
// 2 必须始终保持对该响应式对象的引用, 不可以随意地 “替换” 一个响应式对象,
// 3 从响应式对象中解构属性时，我们会失去响应性：

const model = reactive({
  name: "model",
  num: 10,
});

// 解构赋值 【改变时，视图不会生效】
const { num, name } = model;

const changeKey = () => {
  model.num++;
};
</script>
